<script lang="ts">
import { defineComponent, ref } from 'vue';
import { HomeOutlined, MessageOutlined, UserOutlined, CarOutlined } from '@ant-design/icons-vue'

export default defineComponent({
  components: {
    HomeOutlined,
    MessageOutlined,
    UserOutlined,
    CarOutlined,
  },
  setup() {

    const current = ref<string[]>(['home'])

    return {
      current,
    }
  },
  methods: {
    goToHome() {
      this.$router.push('/home')
    },
    goToMap() {
      this.$router.push('/map')
    },
    goToFeedback() {
      this.$router.push('/feedback')
    },
    goToParkSuggest() {
      this.$router.push('/feedback/park-suggest')
    },
  }
})
</script>


  <template>
    <a-menu v-model:selectedKeys="current" mode="horizontal" theme="dark">
      <a-menu-item key="home" style="margin-left: 20px;" @click="goToHome()">
        <template #icon>
          <home-outlined />
        </template>
        首页
      </a-menu-item>
      <a-menu-item key="parks" @click="goToMap()">
        <template #icon>
          <car-outlined />
        </template>
        地图
      </a-menu-item>
      <a-sub-menu key="sub1">
        <template #icon>
          <message-outlined />
        </template>
        <template #title>反馈</template>
        <a-menu-item-group title="问题反馈">
          <a-menu-item key="setting:1" @click="goToFeedback()">问题反馈</a-menu-item>
        </a-menu-item-group>
        <a-menu-item-group title="新增停车场建议">
          <a-menu-item key="setting:2" @click="goToParkSuggest()">新增停车场建议</a-menu-item>
        </a-menu-item-group>
      </a-sub-menu>
      <a-sub-menu key="user-sub" style="margin-left: auto; margin-right: 20px;">
        <template #icon>
          <user-outlined />
        </template>
        <template #title>Lain</template>
        <a-menu-item-group title="用户">
          <a-menu-item key="user:1">问题反馈</a-menu-item>
        </a-menu-item-group>
        <a-menu-item-group title="账户选项">
          <a-menu-item key="user:0">退出登录</a-menu-item>
        </a-menu-item-group>
      </a-sub-menu>
    </a-menu>
  </template>


<style lang="scss" scoped></style>